<template>
  <view class="container">
    <home-header />
    <activity-section />
    <product-section 
      title="Tea.bit"
      subtitle="茶比特系列"
      :products="teaProducts"
    />
    <product-section 
      title="Zero."
      subtitle="001系列"
      :products="zeroProducts"
    />
  </view>
</template>

<script>
import HomeHeader from '../index/components/HomeHeader.vue'
import ActivitySection from '../index/components/ActivitySection.vue'
import ProductSection from '../index/components/ProductSection.vue'

export default {
  components: {
    HomeHeader,
    ActivitySection,
    ProductSection
  },
  data() {
    return {
      teaProducts: [
        {
          image: '/static/products/tea1.png',
          name: '这是产品名称',
          description: '这是产品品高介绍',
          price: '1446.8',
          points: '888'
        },
        {
          image: '/static/products/tea2.png',
          name: '这是产品名称',
          description: '这是产品品高介绍',
          price: '1446.8',
          points: '888'
        },
        {
          image: '/static/products/tea3.png',
          name: '这是产品名称',
          description: '这是产品品高介绍',
          price: '1446.8',
          points: '888'
        }
      ],
      zeroProducts: [
        {
          image: '/static/products/zero1.png',
          name: '这是产品名称',
          description: '这是产品品高介绍',
          price: '1446.8',
          points: '888'
        },
		{
          image: '/static/products/zero1.png',
          name: '这是产品名称',
          description: '这是产品品高介绍',
          price: '1446.8',
          points: '888'
        },
		{
			  image: '/static/products/zero1.png',
			  name: '这是产品名称',
			  description: '这是产品品高介绍',
			  price: '1446.8',
			  points: '888'
		  }
      ]
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>
